<template>
	<view>
		<view class="cu-form-group">
			<view class="title"><text v-show="required" class="text-red">*</text>{{labelName}}</text></view>
			<input type='text' v-show="false" v-model='modelValue' :name='path' >
		</view>
		<checkbox-group class="block" @change="CheckboxChange">
			<view class="cu-form-group" v-for="(val,ind) in picker">
				<view class="title">{{val.name}}</view>
				<checkbox :class="val.checked?'checked':''" :checked="val.checked" :value="val.value"></checkbox>
			</view>
		</checkbox-group>
	</view>
</template>

<script>
	/**
	 * 多选组件
	 * @property {String} value 传入默认值
	 * @property {String} labelName 标签名称
	 * @property {String} path 绑定的name值
	 * @property {Array} dictData 字典数据 [{name:'名字',value:'值'}]
	 * @property {String} dictType 字典类型(如果有默认字典数据dictType不生效)
	 * @property {Boolean} required 是否必填
	 * @event @change 日期选择事件
	 * @example <js-checkbox labelName='下拉多选' dictType="sys_menu_type" path='testSelectMultiple' :value='main.testSelectMultiple'></js-checkbox>
	 */
	import moment from 'moment'
	import {mapActions} from 'vuex'
	export default {
		name: 'js-checkbox',
		behaviors: ['uni://form-field-group'],
		data() {
			return {
				index: -1,
				picker: [],
				modelValue: '',
				result:[]
			}
		},
		computed:{
		},
		props: {
			labelName: {
				type: String,
				default: ''
			},
			path: {
				type: String,
				default: ''
			},
			value:{
				type: String,
				default: ''
			},
			dictData:{
				type: Array,
				default(){
					return null
				}
			},
			dictType:{
				type: String,
				default: ''
			},
			required:{
				type: Boolean,
				default: false
			}
		},
		mounted() {
			// 获取字典值
			this.getDictData()
		},
		methods:{
			...mapActions(['getDict']),
			async CheckboxChange(e) {
				this.modelValue = e.detail.value.join(",")
				this.$emit("change", this.modelValue)
				this.picker.forEach((val, ind) => {
					this.$set(this.picker[ind], "checked", false)
				})
				if(this.modelValue){
					let valueList = this.modelValue.split(",")
					this.result.forEach((v, k)=>{
						if(valueList.indexOf(v.value) != -1){
							this.$set(this.picker[k], "checked", true)
						} else {
							this.$set(this.picker[k], "checked", false)
						}
					})
				}
			},
			async getDictData(){
				this.result = []
				if(this.dictData) {
					this.result = this.dictData
				} else {
					this.result = await this.getDict({dictType: this.dictType})
				}
				this.picker = this.result
				if(this.value){
					let valueList = this.value.split(",")
					this.result.forEach((v, k)=>{
						if(valueList.indexOf(v.value) != -1){
							this.$set(this.picker[k], "checked", true)
						}
					})
					this.modelValue = this.value
				}
			}
		},
		watch: {
			labelName(){
				// 获取字典值
				this.getDictData()
			},
			path(){
				// 获取字典值
				this.getDictData()
			},
			value(){
				// 获取字典值
				this.getDictData()
			},
			dictType(){
				// 获取字典值
				this.getDictData()
			},
			dictyData(){
				// 获取字典值
				this.getDictData()
			},
			required(){
				// 获取字典值
				this.getDictData()
			}
		}
	}
</script>

<style>
	.cu-form-group{
		border-top:null;
		border-bottom:1rpx solid #eee;
	}
</style>
